<template>
  <div class="container">
    <div class="table-container">
      <el-table :data="list" height="500px">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="用户类型" align="center">
          <template slot-scope="scope">
            <div>
              {{ formatUserRole(scope.row.userRole) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="userName" align="center">

        </el-table-column>
        <el-table-column label="手机号" prop="userName" align="center">

        </el-table-column>
        <el-table-column label="商户名称" prop="businessName" align="center">

        </el-table-column>
        <el-table-column label="商户昵称" prop="nickName" align="center">

        </el-table-column>
        <el-table-column label="创建人" prop="createUserName" align="center">

        </el-table-column>
        <el-table-column label="创建时间" prop="createDate" align="center">

        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <span>
              <el-tag
                size="mini"
                effect="dark"
                :type="formatStates(scope.row.state)"
              >
                {{ formatState(scope.row.state) }}
              </el-tag>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import YmAccountRelationApi from "@/api/account/ymAccountRelation";
export default {
  data() {
    return {
      list: [],
      id: ""
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getData();
  },
  methods: {
    async getData() {
      const { data } = await YmAccountRelationApi.listAccountRelation({
        ymAccountId: this.id
      });
      this.list = data || [];
    },
    formatUserRole(type) {
      switch (type) {
        case 1:
          return "管理员";
        case 2:
          return "客户";
        case 3:
          return "商户管理员";
        case 4:
          return "服务员";
        case 5:
          return "业务员";
      }
    },
    formatState(cellValue) {
      if (cellValue === -1) {
        return "删除";
      } else if (cellValue === 0) {
        return "禁用";
      } else if (cellValue === 1) {
        return "启用";
      }
    },
    formatStates(cellValue) {
      if (cellValue === -1) {
        return "danger";
      } else if (cellValue === 0) {
        return "info";
      } else if (cellValue === 1) {
        return "success";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/views/table.scss";
</style>

<style lang="scss" scoped>
.container {
  padding: 10px;
}
</style>
